import {StyleSheet, Text, TouchableOpacity, View, FlatList, Clipboard, TextInput} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import NoData from "@/components/NoData";
import FcButton from "@/components/FcButton";
import FcModal from '@/components/FcModal';
import {useDispatch, useSelector} from "react-redux";
import {set_notice} from "@/store/reducer/my/mySlice";
import {Flex} from "@ant-design/react-native";

import {
  useGetNoticeListQuery,
} from "@/store/api/login/loginApi";

import {
  useUpdateLogsReadMutation,
} from "@/store/api/my/myApi";

type Props = {}

const notice = (props: Props) => {
  const [listParams, setListParams] = useState({
    pageNo: 1,
    pageSize: 20,
  })
  const [noticeList, setNoticeList] = useState<any>([])
  const [rowData, setRowData] = useState<any>({})
  const [noticeDetailOpen, setNoticeDetailOpen] = useState(false)
  const [noticeCount, setNoticeCount] = useState(0)
  const [pageScrollBodyH, setPageScrollBodyH] = useState(0)

  const {data:listDataRef,isSuccess:listSuccess,refetch:listRefetch} = useGetNoticeListQuery(listParams)
  const [updateLogsReadFun] = useUpdateLogsReadMutation()

  let p = useSelector(state => state.my.notice)
  const dispatch = useDispatch()

  useEffect(() => {
    listRefetch()
  },[])

  useEffect(() => {
    setNoticeCount(p)
  },[p])

  useEffect(() => {
    if(listDataRef?.code === 200){
      const list = listDataRef?.result || []
      setNoticeList(list)
    }
  },[listSuccess,listDataRef])

  const getScrollBodyInfo = ({height}) => {
    setPageScrollBodyH(height)
  }

  //查看详情
  const handleDetail = (item:any) => {
    setRowData(item)
    setNoticeDetailOpen(true)

    //更新为已读消息
    if(item.readFlag == 0){
      updateLogsReadFun({anntId: item.id, readType: 1}).then(res => {
        let arr = JSON.parse(JSON.stringify(noticeList))
        arr.forEach((val:any) => {
          if(val.id == item.id){
            val.readFlag = 1
          }
        });
        setNoticeList(arr)
        dispatch(set_notice(noticeCount + 1))
      })
    }
  }

  return (
    <PageScrollView
      isTransparentTab
      getPageScrollBodyInfo={getScrollBodyInfo}
      pageTab={
        <PageTabBar
          style={{marginVertical: 10}}
          title={'消息通知'}
        />
      }
    >
      <View>
        {
          noticeList.map((item:any, index:any) => (
            <TouchableOpacity key={index} onPress={() => handleDetail(item)}>
              <View key={index} style={styles.notice_item}>
                <Text style={[styles.notice_item_title, item.readFlag == 1 ? {color: 'rgba(0, 0, 0, 0.5)'} : null]}>{item.titile}</Text>
                <Text style={{color: item.readFlag == 1 ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)'}} numberOfLines={3}>{item.msgContent}</Text>
              </View>
            </TouchableOpacity>
          ))
        }
        {noticeList.length == 0 && <Flex style={{height: pageScrollBodyH - 50}}><NoData hintText='暂无数据'/></Flex>}
      </View>

      {/* 消息详情弹窗 */}
      <FcModal
        isOpen={noticeDetailOpen}
        onFcModalClose={() => setNoticeDetailOpen(false)}
        titleText='消息详情'
        titleBottomBorderWidth={1}
        bottom={
          <TouchableOpacity>
            <Flex justify='center' style={{height: 56}}>
              <FcButton
                type='BjJB'
                colors={['#6989FF', '#C65EFD']}
                style={{width: '60%', height: 40, justifyContent: 'center'}}
                itemStyle={{borderRadius: 8, fontSize: 15}}
                textName='知道了'
                onPress={() => setNoticeDetailOpen(false)}
              />
            </Flex>
          </TouchableOpacity>
        }
      >
        <View style={{paddingHorizontal: 16, paddingVertical: 12}}>
          <Text>{rowData?.msgContent}</Text>
        </View>
      </FcModal>
    </PageScrollView>
  )
}

export default notice

const styles = StyleSheet.create({
  notice_item: {
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#FFF',
    marginTop: 10
  },
  notice_item_title: {
    fontSize: 17,
    fontWeight: '500',
    marginBottom: 5,
  }
})

